<template>
	<view class="content">
		<!-- 导航条 -->
		<u-navbar title="疫苗专区" safeAreaInsetTop placeholder fixed leftIcon=''></u-navbar>
		<!-- <view class="seach-nav">
			<img src="../../static/1677228019185.jpg" style='width: 90rpx;height: 60rpx;' alt="">
			<view class="" style="display: flex;align-items: center;margin-right: 20rpx;">
				<text style="font-size: 30rpx;margin:0 10rpx;">商丘市</text>
				<u-icon style='font-size: 24rpx;margin-top: 10rpx;' name="arrow-down"></u-icon>
			</view>
		</view> -->
		<u-swiper :list="list2" height='320' imgMode='' @change="change"></u-swiper>
		<u-search height='50' :focus='false' placeholder='请输入疫苗名称' shape="square" :showAction="false"></u-search>
		<!-- 内容 -->
		<view class="content-list">
			<u-tabs :list="list1" @click="click" lineWidth='25'
				itemStyle="padding-left: 18px; padding-right: 18px; height: 34px;" :inactiveStyle="{color: '#fff',}"
				:activeStyle="{color: '#fff'}" lineColor='#fff'></u-tabs>
			<!-- <view class="tab-a" style="width: 100%;padding: 20rpx 30rpx;white-space: nowrap">
				<view :class="activeIndex == index?'active':''" class="tab-item" v-for="(item,index) in list"
					:key="index" @click="calssIndex(index)">
					{{item.name}}
				</view>
			</view> -->
			<view style="color: #fff;font-size: 32rpx;margin-top:30rpx;font-weight: bold;padding-left: 20rpx;">
				疫苗专区
			</view>
			<view class="list" v-for="(item,index) in NodeList" :key="index">
				<view class="list-top">
					<view class="list-project" >
						<view class="list-img">
							<image style="width: 100%;height: 100%;" :src="item.img" mode="">
							</image>
						</view>
						<view class="list-project-info">
							<view class="list-project-info-t">
								{{item.name}}
							</view>
							<view class="list-project-info-tips">
								{{item.tips}}
							</view>
							<view class="list-project-info-price">
								<view class="list-project-top-price">￥1388</view>
								<view class="yuyue-btn" @click="goinfo">
									立即预约
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="project-renzheng">
						<view class="project-renzheng-itme">
							<image src="../../static/renzheng.png" style="width: 34rpx;height: 34rpx;" mode=""></image>
							<text class="project-renzheng-item-txt">官方认证</text>
						</view>
						<view class="project-renzheng-itme">
							<image src="../../static/renzheng.png" style="width: 34rpx;height: 34rpx;" mode=""></image>
							<text class="project-renzheng-item-txt">真苗保障</text>
						</view>
						<view class="project-renzheng-itme">
							<image src="../../static/renzheng.png" style="width: 34rpx;height: 34rpx;" mode=""></image>
							<text class="project-renzheng-item-txt">支持退款</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 60rpx;background-color: transparent;">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list1: [{
					name: 'HPV疫苗',
				}, {
					name: '带状疱疹',
				}, {
					name: '流感疫苗'
				}, {
					name: '肺炎疫苗'
				}],
				activeIndex: 0,
				list2: [
					'../../static/e09e3746fc54e3e7b24d8421280a7eb.jpg',
					'../../static/395efcdd5010f8b79e6dba69b0e085b.jpg',
					'../../static/dbd22cb95df4d948bc2292eff89cabb.jpg',
					'../../static/c1525a12be1a596af06008b51a7fd08.jpg',
					'../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
					'../../static/0d4af635398951a36ef6cadbd8289d2.jpg'
				],
				NodeList: [{
						img: '../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
						name: '全国九价现货|全国北京上海广州深圳青岛武汉南京9价HPV疫苗3针套餐预约代订 (扩龄9-45岁火热预售中抢先排队)',
						tips: '[新春特惠]全国九价扩龄火热抢购中，9-45岁城市现货可约!',
						price: '1331.00',
					},
					{
						img: '../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
						name: '全国九价现货|全国北京上海广州深圳青岛武汉南京9价HPV疫苗3针套餐预约代订 (扩龄9-45岁火热预售中抢先排队)',
						tips: '[新春特惠]全国九价扩龄火热抢购中，9-45岁城市现货可约!',
						price: '1331.00',
					},
					{
						img: '../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
						name: '全国九价现货|全国北京上海广州深圳青岛武汉南京9价HPV疫苗3针套餐预约代订 (扩龄9-45岁火热预售中抢先排队)',
						tips: '[新春特惠]全国九价扩龄火热抢购中，9-45岁城市现货可约!',
						price: '1331.00',
					},
					{
						img: '../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
						name: '全国九价现货|全国北京上海广州深圳青岛武汉南京9价HPV疫苗3针套餐预约代订 (扩龄9-45岁火热预售中抢先排队)',
						tips: '[新春特惠]全国九价扩龄火热抢购中，9-45岁城市现货可约!',
						price: '1331.00',
					},
					{
						img: '../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
						name: '全国九价现货|全国北京上海广州深圳青岛武汉南京9价HPV疫苗3针套餐预约代订 (扩龄9-45岁火热预售中抢先排队)',
						tips: '[新春特惠]全国九价扩龄火热抢购中，9-45岁城市现货可约!',
						price: '1331.00',
					},
					{
						img: '../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
						name: '全国九价现货|全国北京上海广州深圳青岛武汉南京9价HPV疫苗3针套餐预约代订 (扩龄9-45岁火热预售中抢先排队)',
						tips: '[新春特惠]全国九价扩龄火热抢购中，9-45岁城市现货可约!',
						price: '1331.00',
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			change() {

			},
			goinfo(){
				uni.navigateTo({
					url:'/pages/projectInfo/projectInfo'
				})
			}
			// calssIndex(index) {
			// 	this.activeIndex = index
			// }
		},
		onReachBottom() {
			console.log('---');
		},


	}
</script>

<style scoped>
	.content-list {
		width: 100%;
		background: -webkit-linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
	}

	.tab-item {
		border-radius: 16rpx;
		background: #B1BEFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 14px;
		padding: 10rpx 15rpx;
		margin-right: 10rpx;
	}

	.active {
		background-color: #fff;
		color: #6B83FF;
	}

	.tab-a {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		box-sizing: border-box;
	}

	.list {
		width: 95%;
		height: 380rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 25rpx;
		padding-bottom: 0;
		box-sizing: border-box;
	}

	.list-top {
		height: 100%;

	}

	.list-project {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 280rpx;
	}

	.list-project-info {
		width: 420rpx;
		height: 100%;
	}

	.list-project-info-t {
		font-size: 32rpx;
		max-height: 82rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.list-project-info-tips {
		width: 100%;
		height: 90rpx;
		background-color: #FFFAE1;
		border-radius: 10rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 15rpx;
		color: #EF9448;
		font-size: 22rpx;
		line-height: 32rpx;
	}

	.list-project-info-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
	}

	.list-project-top-price {
		font-size: 26rpx;
		color: red;
		font-weight: bold;
	}

	.yuyue-btn {
		display: flex;
		width: 130rpx;
		height: 50rpx;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: #6B83FF;
		border-radius: 30rpx;
		font-size: 24rpx;
		float: right;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #ccc;
	}

	.project-renzheng {
		width: 100%;
		box-sizing: border-box;
		padding: 0 50rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between
	}

	.project-renzheng-itme {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.project-renzheng-item-txt {
		font-size: 24rpx;
		margin-left: 16rpx;
		color: #2c2c2c;
	}


	.seach-nav {
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.list-img {
		width: 220rpx;
		height: 220rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}
</style>
